<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
	<head> 
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
		<link rel="stylesheet" type="text/css" href="public/css/style.css" media="screen" />
		<title>eGallery - Register</title>
		<script type="text/javascript" src="public/js/fquery.js"></script>
		<script type="text/javascript" >
			
		
			var nameRegex = /^[A-Za-z ]{5,}$/;
			var usernameRegex = /^[A-Za-z0-9\._]{5,}$/;
			var passwordRegex = /.{6,}/;
			var bdayRegex = /^\d{4}\-\d{2}\-\d{2}$/;
			var emailRegex = /^[A-Za-z0-9\._]*@[A-Za-z0-9_]{2,}(\.[A-Za-z0-9_]+)*$/;
			var locationRegex = /^.{5,}$/;
			
			var validator = {
				'name': {
					'regex' : /^[A-Za-z\s]{5,}$/,
					'message' : 'Nama hanya boleh mengandung spasi dan alfabet dan minimum 5 karakter'
				},
				'username' : {
					'regex' : /^[A-Za-z0-9\._]{5,}$/,
					'message' : 'Username hanya boleh mengandung alfanumerik, _ dan . dan minimum 5 karakter'
				},
				'password' : {
					'regex' : /.{6,}/,
					'message' : 'Password harus lebih panjang dari 6 karakter'
				},
				'repassword' : {
					'match' : 'password',
					'message' : 'Password tidak sama'
				},
				'bday' : {
					'regex' : /^\d{4}\-\d{2}\-\d{2}$/,
					'message' : 'Format YYYY-MM-DD'
				},
				'email' : {
					'regex' : /^[A-Za-z0-9\._]*@[A-Za-z0-9_]{2,}(\.[A-Za-z0-9_]+)*$/,
					'message' : 'Email tidak standar'
				},
				'sex' : {
					'regex' : /^(M|F)$/,
					'message' : 'Please choose a reasonable gender'
				},
				'location' : {
					'regex' : /^.{5,}$/,
					'message' : 'Lokasi minimum 5 karakter'
				},
				'profpic' : {
					'regex' : /^.*\.(bmp|jpeg|jpg|gif|png)$/,
					'message' : 'Tipe gambar: bmp|jpeg|jpg|gif|png'
				}
			}
			
			var form;
		
			function init() {
				//alert(document.getElementById("content").getAttribute('class'));
				form = document.forms["registrationForm"];
				calendar("datepicker","registrationForm","bday");
				//$("#content .drow");
				validate("registrationForm" , validator);
			}
			
			function reloadCSS() {
				var links = document.getElementsByTagName("link");
				for (var i in links) {
					if (links[i].getAttribute('href') == "public/css/style.css") {
						links[i].setAttribute('href' , 'public/css/style2.css');
					}
					else
						links[i].setAttribute('href' , 'public/css/style.css');
					//alert("OK");
				}
				return false;
			}
			
		</script>
	</head> 
	<body onload="init()"> 
		<div id="bodyWrapper"> 
			<div id="header"> 
				<ul id="accountBar"> 
					<li><a href="#" onclick="return reloadCSS()">Switch CSS</a></li> 
					<li><a href="">Logout</a></li> 
				</ul> 
			</div> 
			<div class="dummy"></div> 
			<ul id="pgmenu"> 
				<li> 
					<a href="register.html">Daftar</a> 
				</li> 
				<li> 
					<a href="upload.html">Upload</a>
				</li> 
				<li> 
					<a href="gallery.html">Galeri</a>
				</li> 
			</ul> 
			<br style="clear: both;" />
		
			<div id="content">
				<h2>Daftar</h2>
				<form id="registrationForm" method="post" action="register.php" enctype="multipart/form-data" onsubmit="return validateForm()">
					<div class="dtable">
						<div class="drow">
							<span class="shead"><label for="name">Nama</label></span>
							<span><input type="text" id="name" name="name" /></span>
						</div>
						<div class="drow">
							<span class="shead"><label for="username">Username</label></span>
							<span><input type="text" id="username" name="username" /></span>
						</div>
						<div class="drow">
							<span class="shead"><label for="password">Password</label></span>
							<span><input type="password" id="password" name="password" /></span>
						</div>
						<div class="drow">
							<span class="shead"><label for="repassword">Password Lagi</label></span>
							<span><input type="password" id="repassword" name="repassword" /></span>
						</div>
						<div class="drow">
							<span class="shead"><label for="bday">Tanggal lahir</label></span>
							<span>
								<input type="text" id="bday" name="bday" />
                                                                <a href="#"><img onclick="toggleCalendar(this);return false;" class="dp-choose-date" alt="date" src="public/img/calendar.png" title="Pilih Tanggal" /></a>
								<span class="dummy"></span>
							</span>
						</div>
						<div class="drow">
							<span class="shead"><label for="email">Email</label></span>
							<span><input type="text" id="email" name="email" /></span>
						</div>
						<div class="drow">
							<span class="shead"><label for="profpic">Foto Profil</label></span>
							<span><input type="file" id="profpic" name="profpic" /></span>
						</div>
						<div class="drow">
							<span class="shead"><label for="sex">Jenis Kelamin</label></span>
							<span>
								<select id="sex" name="sex">
									<option value="M">L</option>
									<option value="F">P</option>
								</select>
							</span>
						</div>
						<div class="drow">
							<span class="shead"><label for="location">Location</label></span>
							<span><input type="text" id="location" name="location" /></span>
						</div>
						<div class="drow">
							<span class="shead"><input type="submit" value="Daftar" /></span>
						</div>
					</div>
				</form>
			</div>
		</div>
                <div id="datepicker"></div>
		<script src="public/js/calendar.js" type="text/javascript"></script>
	</body>

</html>